<script setup lang='ts'>
import ShowBook from '../showBook.vue'
import { onMounted, ref } from 'vue'
import NoInfo from '../../../components/MainBody/NoInfo/index.vue'
import { useBooksStore } from '@/store/useBooksStore'
import { storeToRefs } from 'pinia'
import Pagination from '../../../components/MainBody/Pagination/index.vue'


const BooksStore = useBooksStore()
const {normalBook} = storeToRefs(BooksStore)
//数据总数
const allDataCount = ref(normalBook.value.length)

//创建一个数组，用于存放当前页数的数据
const currentBook:any = ref([])

//更新当前页面数据
const showBooks = (start:number)=>{
    currentBook.value = []
    for(let i=start;i<(start+5);i++){
        if(i==normalBook.value.length){return}
        currentBook.value.push(normalBook.value[i])
    }
}

onMounted(()=>{
    //组件挂载先加载前5条数据
    showBooks(0)
})

//分页条一更新，就调用showBooks更新数据
const updatePagin = (Data:any)=>{
    const startPagin = (Data.pagin-1)*5
    showBooks(startPagin)
}

// 是否有数据？
const noBook = ref(false)
noBook.value = normalBook.value.length==0 ? true:false
</script>
<template>
    <div>
        <NoInfo v-if="noBook"/>
        <div v-else>
            <ShowBook v-for="(item,index) in currentBook" :key="index" :bookName="item.bookName" :bookPublic="item.bookPublic" :bookAuthor="item.bookAuthor" :bookPrice="item.bookPrice" :bookCount="item.bookCount" :bookUrl="item.bookUrl" />
            <Pagination @updatePagin="updatePagin" :allDataCount="allDataCount" />
        </div>

    </div>
</template>
<style scoped>
</style>